<template>
  <div class="home">
    <!-- 顶部搜索栏 -->
    <div class="top">
      <van-search
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        @click="$router.push('/search')"
      />
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, i) in swipeList" :key="i">
        <van-image
          width="100%"
          height="100%"
          :src="item.pic"
        />
      </van-swipe-item>
    </van-swipe>

    <!-- nav -->
    <van-grid :column-num="4" :border="false" class="nav">
      <van-grid-item
        v-for="item in menusList"
        :key="item.id"
        :to="item.url"
        :text="item.name">
        <template #icon>
          <van-image
            class="navImg"
            :src="item.pic"
          />
        </template>
      </van-grid-item>
    </van-grid>

    <!-- shop商品 -->
    <div class="content">
      <!-- 精品推荐 -->
      <div class="title">精品推荐：</div>
      <van-grid :border="false" :column-num="2" class="shop-list">
        <van-grid-item v-for="item in bastList" :key="item.id" @click="getDetail(item.id)">
          <div class="shop">
            <van-image
              width="120px"
              :src="item.image"
            />
            <div class="shop-title">{{ item.storeName }}</div>
            <div class="price">
              <span>￥{{ item.price }}</span>
              <span class="otPrice">￥{{ item.otPrice }}</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="content">
      <!-- 猜你喜欢 -->
      <div class="title">猜你喜欢：</div>

      <van-card
        v-for="item in bastList" :key="item.id"
        tag="like"
        :price="item.price"
        :desc="item.storeInfo"
        :title="item.storeName"
        :thumb="item.image"
        :origin-price="item.otPrice"
         @click="getDetail(item.id)"
      />
    </div>
    <!-- 底部分割线 -->
    <isNull />
  </div>
</template>

<script>
import {
  getSwipe,
  getMenus,
  getBastList,
  getLike,
} from '@/api/home'

export default {
  data() {
    return {
      swipeList: [], // 轮播图
      menusList: [], // 菜单栏
      bastList: [], // 精品推荐
      likeList: [], // 猜你喜欢
    }
  },
  created() {
    this.getSwipe()
    this.getMenus()
    this.getBastList()
    this.getLike()
  },
  methods: {
    // 获取轮播图
    async getSwipe() {
      const { data } = await getSwipe()
      this.swipeList = data || []
    },

    // 获取菜单栏
    async getMenus() {
      const { data } = await getMenus()
      this.menusList = data || []
    },
    
    // 获取精品推荐
    async getBastList() {
      const { data } = await getBastList()
      this.bastList = data || []
    },

    // 猜你喜欢
    async getLike() {
      const { data } = await getLike()
      this.likeList = data || []
    },

    // 商品详情
    getDetail(id) {
      if(!id) return
      this.$router.push({
        path: '/productsDetail',
        query: { id }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.home {
  margin: 5px;
}

// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  height: 24vh;
  text-align: center;
  // background-color: #39a9ed;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  overflow: hidden;
}

// nav
.nav {
  margin: 5px 0 10px;
  .navImg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
  }
}

// shop商品
.content {
  background: #fff;
  text-align: left;
  margin-bottom: 10px;
  .title {
    padding: 5px;
    font-size: 16px;
  }
  .shop {
    text-align: center;
  }
  // .shop .van-image {
  //   box-sizing: border-box;
  //   width: 100%;
  //   padding: 10px 20px;
  //   text-align: center;
  // }
  .shop-title {
    margin: 2px 0;
    font-size: 16px;
  }
  .price {
    font-size: 18px;
    color: #EB7B0D;
    .otPrice {
      font-size: 12px;
      color: #ccc;
      text-decoration: line-through;
    }
  }
  .van-card {
    background-color: #fff;
    .van-card__price {
      font-size: 18px;
      color: #EB7B0D;
    }
  }
}
</style>